Getting Started with the CV API

CV API 2.0

The API 2.0 offers a new "object" oriented flow for programming the visuals in JavaScript. Users need to access the API using the 'CVAPI2' API entry point, which provides the "root" object from which all other objects, methods and properties stem.

The CVAPI2 object and all related functionality is called from the root function for all custom visuals "main" - which is inherently called by Pyramid when the custom visual is loaded. Pivoting from the main function, developers will typically call a rendering function which is attached to the "render" event to draw their visual. The rendering function is usually where all the main components of the logic reside.

Some of this framework is shown below and is loaded into every blank CV project inside the application designer. Click here to see a full example to see it in action, further

function main() {
			// Use cvApi2 to access data and canvas settings:
			// var data = cvApi2.resultSet.data;		 
			
			// Use addEventListener with the suitable event enum to trigger events 
			// cvApi2.canvas.addEventListener(cvApi2.enums.events.DataChanged, function() {}); 
			// cvApi2.canvas.addEventListener(cvApi2.enums.events.ThemeAndStyleChanged, function() {}); 
			// cvApi2.canvas.addEventListener(cvApi2.enums.events.BeforeRender, function() {}); 

			// Use setCustomStyle to add custom styles for the visual
			// cvApi2.canvas.setCustomCssStyle("");

			// Use addExternalLibraries function to add external libraries
			// cvApi2.externalLibraries.addExternalLibraries([]);
						
			//use this to call the main render function to draw the app 
			//this function is repeatedly called if the results has trellised
			cvApi2.canvas.addEventListener(cvApi2.enums.events.Render, render);						  	 
}	
	
function render(){
			//get the trellised data set for rendering 
			var currentTrellisedData = cvApi2.resultSet.data.getCurrentTrellisData(); 
			//add your code here for drawing the visual		
}